<template>
  <div id="app">
    <!-- 视图层 -->
    <div>age = {{ this.$store.state.age }}</div>
    <div>name = {{ this.$store.state.name }}</div>

    <!-- 使用actions的几种方式 -->
    <button @click="updateAge">点击age+1</button>
    <button @click="updateAge2">点击age+n</button>
    <button @click="updateNameActions('小王王')">点我换名字</button>
    
  </div>
</template>

<script>
// 方式2 引入mapActions辅助函数
import { mapActions } from 'vuex'

export default {
  methods: {
    // 方式1: 原始的方式
    updateAge() { // 无参数传递
      // dispatch用来调用actions中的方法
      this.$store.dispatch('updateAsyncAge')
    },
    updateAge2() { // 带参数传递
      this.$store.dispatch('updateAsyncAge2', 10)
    },

    // 方式2 使用mapActions辅助函数
    ...mapActions(['updateNameActions'])
  }
}
</script>

<style>
</style>
